import React from 'react'
import { Switch,Route,Link } from 'dva/router'
import dynamic from 'dva/dynamic'
import {Layout,Menu,Icon } from 'antd'
import logo from './../assets/logo.png'
import HeaderContent from "./BasicLayout/HeaderContent"
import Index from './../routes/Index.js'
import Heatmap from './../routes/Heatmap.js'
import MerchantDefinition from './../routes/MerchantDefinition'
import styles from './BasicLayout/BasicLayout.less'


const { Header,Sider,Content}=Layout;
const {	SubMenu}=Menu;

export default class BasicLayout extends React.Component{
	constructor(props){
		super(props);
		this.state={
			collapsed:false,
			isShowCompanyName:"inline-block"
		}
	}
	/**
	 *	这个方法this.setState({ collapsed });这一句不要动，他是作者添加的，本来这个方法可以再度封装，
	 *		作者这样暴露其实是可以在处理用户业务，特别就是如何处理logo位置
	 */
	onCollapse = collapsed => {   		  
    	if(collapsed){
    		this.setState({
    			collapsed,
    			isShowCompanyName:"none"
    		})
    	}else{
    		this.setState({
    			collapsed,
    			isShowCompanyName:"inline-block"
    		})
    	}
  	};
  	render(){
		return (
			<Layout className={styles.basicLayout}>
				<Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
					{/* 这里可以照着ant design pro写 */}
					<div className={styles.logo}>
						<Link to="/home/index"><img src={logo} alt="" height="30px" /></Link>											
						<h3 style={{display:this.state.isShowCompanyName}}>China Unionpay</h3>
					</div>
					{/* ant design主题问题 */}
					<Menu 
						theme="dark" 
						defaultSelectedKeys={['1']} 
						defaultOpenKeys={['1']}
						mode="inline"											
						>						
						<SubMenu 
							key="1"
							title={
								<span>
									<Icon type="mail" />
                					<span>云闪付</span>
								</span>
							}
							>
							<Menu.Item key="1.1">
                                <Link to="/home/heatmap">热力图</Link>
							</Menu.Item>
            				<Menu.Item key="1.2">
                                <Link to="/home/frequence-heatmap">使用频次热力图</Link>
                            </Menu.Item>
                            <Menu.Item>
                            	<Link to="/home/merchantDefinition">商圈定义</Link>
                            </Menu.Item>
						</SubMenu>
						<SubMenu 
							key="2"
							title={
								<span>
									<Icon type="pie-chart" />
                					<span>使用频次</span>
								</span>
							}>
							<Menu.Item key="2.1">
								<Link to="/home/frequence-distribute">
									用户频次分布
								</Link>
							</Menu.Item>
            				<Menu.Item key="2.2">
            					<Link to="/home/frequence-analyse">
									用户频次分析
								</Link>
            				</Menu.Item>
						</SubMenu>
						<Menu.Item>
							<Icon type="desktop" />							
            				<span>
            					<Link to="/home/institution" style={{color:"rgba(255, 255, 255, 0.65)"}}>
									大商户
								</Link>
							</span>
						</Menu.Item>
					</Menu>
				</Sider>
				<Layout>
                    <Header className={styles.header}>
                        {/* 
                          * 这种从Home->BasicLayout->HeaderContent三级传递state和dispatch的方法看似很差，
                          *     他体现一种思想：“绝不在组件中connect状态数据” 
                          */}
                        <HeaderContent 
                            currentUser={this.props.currentUser}
                            onLogout={this.props.onLogout} />
         			</Header>     
                    {/* 这里就是react-router v4 布局与路由紧耦合的思想，在布局中包含路由 */}
                    <Content>
                        <Switch>
                            <Route path="/home/index" component={Index}  key="homeindex" /> 
                            <Route path="/home/heatmap" component={Heatmap}  key="homeheatmap"/> 
                            <Route 
                            	path="/home/frequence-heatmap" 
                            	component={
                            		dynamic({
								    	component: () => import('./../routes/FrequenceHeatmap.js')
									})
                        		} 
                        		key={Math.random()}
                        	/> 
                            <Route path="/home/merchantDefinition" component={MerchantDefinition} /> 
                        </Switch>
                    </Content>                  
				</Layout>
			</Layout>
		)
	}
}
//1> 从设计理念上来说layout不需要绑定connect,他与路由结合生成页面解决方案
//2> <Layout className="basic-layout" style={{ minHeight: '100vh' }}>
//		ant design layout组件最终生成以section，具有block css属性，作者默认给，在.ant-layout通用类上设置属性
//		background: #f0f2f5; 所有layout内部的元素除非自己排除，否则强行带上该背景。
//3> <Aside>生成aside.ant-layout-sider-children,他min-height:100%;也就是说默认他的高度就是直接父容器<Layout>
//		高度，这就是<Layout>设置minHeight 100vh后自动扩展<Menu>部分高度，
//		这点是必须的，如果不这么设置，<Aside>内部内容延伸高度，当内容很少时候，	body #root默认无背景就显示出来，
//		视觉上显得有些怪异。
//4> <Menu>生成div.ant-menu-dark, .ant-menu-dark .ant-menu-sub，默认使用dart样式，他与<Aside>默认一样：#001529，
//		当菜单hover、.active时切换背景、字体高亮显示......
//5> ant design这种方式是使用左右+右（上下）嵌套结构，又叫侧栏布局，这种布局会牺牲横向页面的一部分，
//		因此大部分UI设计了折叠功能，就我这个项目来说折叠默认在菜单栏下方，<Sider>组件传入的collapsed={this.state.collapsed} 
//		onCollapse={this.onCollapse}这两个属性都是固定，不需要任何变化。
//6> collapse默认的位置就蛮好的，问题是有人没事干、又或者版本不同，有人将这个位置调整到头部的文职，
//		ant design提供了修改这个位置的功能,以后可能用到，再我以前的umi、全配置使用layout改不了这个位置，
//		这里因为LoginLayout、BasicLayout都是自己手写，做到这么都很容易			

//7> menu theme="dark"，可选项是dark和light，因为上面介绍了整个左侧部分的背景色是哪里来的，如果修改了menu的的
//		dark到light则意味着其他也要跟着切换，ant design没有metronic的运行时切换主题功能，可以考虑扩折这个功能
//		Menu属于Sider,他也有theme属性，两者设置为一个全局参数即可，意义和用法两者是一样的。
//		如果要切换主题主要就是这两个，另外就是<h3 style={{display:this.state.isShowCompanyName}}>China Unionpay</h3>
//		这个可能就要自定义切换啦，因为他是用户业务。
//	 Menu inlineCollapsed={this.state.collapsed}，作者说再Sider下设置这个不起作用，实际上有Sider的折叠功能，
//		这个属性不需要设置		

